/*
Theme Name: Jokes
Theme URI: 
Author: Wei Zhang
Author URI: http://www.hengha.info/
Description: A simple responsive theme based on the Bootstrap framework. Includes multiple page templates, two different sidebars and a theme options panel.
Version: 1.0
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: Tahoma,Arial,sans-serif;
}

* {
    box-sizing: border-box;
}
body {
    color: #7f8c8d;
    font-size: 13px;
    line-height: 1.7em;
}
h1, h2, h3, h4, h5, h6, label {
    color: #34495e;
}
.pure-img-responsive {
    height: auto;
    max-width: 100%;
}
.l-box {
    padding: 1em;
}
.l-box-lrg {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 2em;
}
.is-center {
    text-align: center;
}
.pure-form label {
    font-size: 100%;
    font-weight: bold;
    margin: 1em 0 0;
}
.pure-form input[type] {
    border: 2px solid #dddddd;
    box-shadow: none;
    font-size: 100%;
    margin-bottom: 1em;
    width: 100%;
}
.pure-button {
    background-color: #1f8dd6;
    border-radius: 5px;
    color: #ffffff;
    padding: 0.5em 2em;
}
a.pure-button-primary {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 5px;
    color: #1f8dd6;
    font-size: 120%;
}
.home-menu {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    text-align: center;
}
.home-menu.pure-menu-open {
    background: none repeat scroll 0 0 #2d3e50;
}
.pure-menu.pure-menu-open.pure-menu-fixed {
    border-bottom: medium none;
    z-index: 4;
}
.home-menu .pure-menu-heading {
    color: #ffffff;
    font-size: 120%;
    font-weight: 400;
}
.home-menu .pure-menu-selected a {
    color: #ffffff;
}
.home-menu a {
    color: #6fbef3;
}
.home-menu li a:hover, .home-menu li a:focus {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #aecfe5;
}
.splash-container {
    background: none repeat scroll 0 0 #1f8dd6;
    height: 88%;
    left: 0;
    overflow: hidden;
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1;
}
.splash {
    bottom: 0;
    height: 50%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 100px;
    width: 80%;
}
.splash-head {
    border: 3px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 100;
    line-height: 1em;
    padding: 1em 1.6em;
}
.splash-subhead {
    color: #ffffff;
    letter-spacing: 0.05em;
    opacity: 0.8;
}
.content-wrapper {
    background: none repeat scroll 0 0 #ffffff;
    min-height: 12%;
    position: absolute;
    top: 87%;
    width: 100%;
    z-index: 2;
}
.content-head {
    font-weight: 400;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
    text-transform: uppercase;
}
.content-head-ribbon {
    color: #ffffff;
}
.content-subhead {
    color: #1f8dd6;
}
.content-subhead i {
    margin-right: 7px;
}
.ribbon {
    background: none repeat scroll 0 0 #2d3e50;
    color: #aaaaaa;
}
.footer {
    background: none repeat scroll 0 0 #111111;
}
@media (min-width: 48em) {
body {
    font-size: 16px;
}
.content {
    padding: 1em;
}
.home-menu {
    text-align: left;
}
.splash {
    height: 50%;
    width: 50%;
}
.splash-head {
    font-size: 250%;
}
.l-box-lrg {
    border: medium none;
}
}
@media (min-width: 78em) {
.splash-head {
    font-size: 300%;
}
}

/*  extend purecss */
.button-a {
    background: none repeat scroll 0 0 #e1f2fa;
    color: #5992aa;
}
.button-b {
    background: none repeat scroll 0 0 #fcebbd;
    color: #af9540;
}
.button-c, .button-d, .button-e {
    border-radius: 8px;
}
.button-f, .button-g, .button-h {
    border-radius: 20px;
}
.button-c {
    background: none repeat scroll 0 0 #333333;
    color: #ffffff;
}
.button-d {
    background: none repeat scroll 0 0 #d3eda3;
    color: #72962e;
}
.button-e {
    background: none repeat scroll 0 0 #f5ab9e;
    color: #8c3a2b;
}
.button-f {
    background: none repeat scroll 0 0 #ddaeff;
    color: #8156a7;
}
.button-g {
    background: none repeat scroll 0 0 #f57b00;
    color: #ffca95;
}
.button-h {
    background: none repeat scroll 0 0 #008ed4;
    color: #ffffff;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}
.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}
/* */
.container{
    position:relative;
    top:55px;
}
.article{
    padding:3px 10px;
    position:relative;
    overflow-x:hidden;
    border-bottom:1px solid green;
    margin-top:3px;
}
.article>header{
    position:absolute;
    left:5px;
    width:80px;
}
.article>.content{
    padding-left:80px;
}
.article>.content img{
    max-width:100%;
    display:block;
}
.avatar{
    width:50px;
    height:50px;
}
.article>.content>footer{
    text-align:right;
}
.page-numbers{
 padding:5px 20px;
 text-align:center;
 font-size:1.4em;
}
.page-numbers>li{
    display:inline-block;
}
.page-numbers>.page-numbers{
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    text-rendering: auto;
    background-color:#f1f1f1;
    margin:0 2px;
}
.page-numbers.current{
    color:#fff;
    background-color:#45a0ec;
    background-image:
}
.page-numbers>li>a{
    text-align: center;
    display: inline-block;
    color:#999;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    text-decoration:none;
}